<template>
  <div class="content">
    <view class="box" v-if="!img&&!pdfUrl">
      <div class="nonebox">
        <image src="/static/img/noneimg.png" class="noneimg" />
        <div class="zanwu">暂无信息</div>
      </div>
    </view>
    <image :src="img" mode="widthFix" class="img" v-if="img" />
    <image src="/static/img/dama.png" mode="widthFix" class="img" v-if="!(!img&&!pdfUrl)&&!img" />

    <div class="downimg" v-if="img||pdfUrl" @click="down">下载发票</div>
    <div class="downpdf" v-if="img||pdfUrl" @click="topdf">查看PDF</div>
    <div class="downpdf" @click="topdf">查看PDF</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: "",
      pdfUrl: "",
    };
  },
  methods: {
    topdf() {
      uni.downloadFile({
        url:
          "https://cloudhouse.mynatapp.cc/anxinsu/whiteList/idcard/2020-08-12/d8571e7d79374f97b6e2b4229d823453.pdf",
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
      });
      return;
      if (!this.pdfUrl) {
        uni.showToast({
          title: "暂无PDF",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      console.log(this.pdfUrl);
      uni.navigateTo({
        url: "/pages/pdfurl/pdfurl?pdfUrl=" + this.pdfUrl,
      });
    },
    down() {
      if (!this.img) {
        uni.showToast({
          title: "暂无电子发票",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      let that = this;
      uni.showLoading({
        title: "加载中",
      });
      uni.getSetting({
        success(res) {
          uni.downloadFile({
            url: that.img,
            success: function (res) {
              console.log(res);
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function (data) {
                  uni.hideLoading();
                  uni.showToast({
                    title: "保存成功",
                    icon: "success",
                    duration: 2000,
                  });
                },
                fail: function (err) {
                  uni.hideLoading();
                  console.log(err);
                },
                complete(res) {
                  uni.hideLoading();

                  console.log(res);
                },
              });
            },
          });
        },
      });
    },
  },
  onLoad(options) {
    console.log(options);
    if (options.img && options.img != "null") {
      this.img = options.img;
    }
    if (options.pdfUrl && options.pdfUrl != "null") {
      this.pdfUrl = options.pdfUrl;
    }
  },
};
</script>

<style>
page {
  background: white;
}
.img {
  width: 100%;
}
.xiazai {
  height: 56rpx;
  width: 68px;
  display: block;
  margin: auto;
  margin-top: 40rpx;
}
.noneimg {
  height: 380rpx;
  width: 380rpx;
  margin: auto;
  display: block;
}
.zanwu {
  font-size: 28rpx;
  color: #797979;
  text-align: center;
}
.box {
  padding-top: 300rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 20rpx;
}
.content {
  padding: 20rpx;
}
.nonebox {
}
.downimg {
  width: 100%;
  height: 80rpx;
  border: 1px solid rgba(67, 130, 255, 1);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(67, 130, 255, 1);
  margin: auto;
}
.downpdf {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(67, 130, 255, 1);
  text-align: center;
  margin-top: 20px;
}
</style>
